<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        nav {
            margin: auto;
            width: 400px;
            height: 50px;
            line-height: 50px;
        }
        a{
            text-decoration: none;
            cursor: pointer;
            margin-left: 20px;
        }
        a:hover{
            color: rgb(38, 186, 227);
        }
    </style>
</head>

<body>
    <nav>
        <a href="">全部</a>
        <a href="">阅读</a>
        <a href="">情感</a>
        <a href="">连播</a>
        <a href="">校园</a>
        <a href="">音乐</a>
        <a href="">Labs</a>
    </nav>
    <div class="list">
        <ul>

        </ul>
    </div>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <script>
            var list = document.querySelector(".list > ul"); //内容列表
            var nava = document.querySelectorAll("nav > a"); //分类
            var olLi = document.querySelectorAll("ol > li"); //页数

            // 假设一次获取20条
            var limit = 20;
            // 页面初始获取第一页
            var page = 1;
            // 页面初始获取所有分类(全部)
            var tab = 0;
            function listRef() {
                var url = `/listref?tab=${tab}&page=${page}&limit=${limit}`;
                fetch(url).then(function (res1) {
                    return res1.json();
                }).then(function (res) {
                    if (res.success) {
                        //    console.log(res.data); 
                        var str = "";
                        res.data.forEach(item => {
                            console.log(item);
                            str += `<li>
                            <img src="${item.img_url}" alt="">
                            <h3><a href="/wenzhang.html?id=${item.id}">${item.title}</a></h3>
                                    <h3>作者:${item.author}</h3>
                               
                                    <h6>${item.labels}</h6>
                                    <p>${item.created_time}</p>
                                </li>`
                        });
                        list.innerHTML = str;
                    }
                })
            }
            listRef();
            navStyle()

            function navStyle() {
                for (let i = 0; i < nava.length; i++) {
                    nava[i].classList.remove("action");

                }
                nava[tab].classList.add("action")
            }

            for (let i = 0; i < nava.length; i++) {
                nava[i].onclick = function (e) {
                    e.preventDefault();
                    tab = i;
                    page = 1;
                    listRef();
                    navStyle();
                }

            }

            for (let k = 0; k < olLi.length; k++) {
                olLi[k].onclick = function () {
                    page = this.innerHTML;
                    listRef();
                }
            }
        </script>
</body>

</html>